<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标字体</title>
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <style>
        /* i{
            font-size: 100px;
            color: tomato;
        } */

        ul{
            list-style: none;
        }

        /* 也可以通过before或after伪元素来使用图标字体 */
        li::before{
            content: '\f017';
            padding-right: 10px;
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; 
        }

    </style>
</head>
<body>
    
    <i class="fas fa-angry"></i>
    <i class="fas fa-arrow-alt-circle-up"></i>

    <!-- 
        除了通过类来使用图标字体，也可以通过编码来使用 
        &#x十六进制实体编码;
    -->
    <i class="fas">&#xf35b; &#xf0f3;</i>


    <ul>
        <li>孙悟空</li>
        <li>猪八戒</li>
        <li>沙和尚</li>
        <li>唐僧</li>
    </ul>


</body>
</html>